<form class="form-horizontal" id="sign-transaction-form" data-toggle="validator" role="form">
    <div class="form-group" id="source-address-field">
        <!-- Source Address Field -->
    </div>
    <div class="form-group">
        <label for="sign-transaction" class="col-sm-3 control-label text-left">
            Unsigned
            <a href="#" data-toggle="tooltip" title='This is the raw transaction to be signed' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
            <br/>Transaction
        </label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" id="sign-transaction" name="transaction" placeholder="Unsigned Transaction" data-minlength="1" required rows="3"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="address" class="col-sm-3 control-label text-left">
            Signed
            <a href="#" data-toggle="tooltip" title='This is the signed transaction which is ready to be broadcast' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
            <br/>Transaction
        </label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" id="signed-transaction" name="signed-transaction" placeholder="Signed Transaction" rows="3" readonly></textarea>
        </div>
    </div>
    <div id="transaction-status" style="width: 180px !important;"></div>
    <div class="text-right">
        <div id="btn-cancel" class="btn btn-danger"><i class="fa fa-lg fa-fw fa-ban"></i> Cancel</div>
        <div id="btn-verify" class="btn btn-warning"><i class="fa fa-lg fa-fw fa-search"></i> Verify </div>
        <div id="btn-submit" class="btn btn-success"><i class="fa fa-lg fa-fw fa-file-text"></i> Sign </div>
        <div id="btn-broadcast" class="btn btn-info"><i class="fa fa-lg fa-fw fa-bullhorn"></i> Broadcast</div>
    </div>
</form>


<script>
$(document).ready(function(){

    // Load any field content
    $('#source-address-field').load('html/fields/source-address.html');

    // Delay initializing some fields to give things a chance to load
    setTimeout(function(){

        // Handle loading any data from FW.DIALOG_DATA
        var data = FW.DIALOG_DATA;
        console.log('data=',data);
        if(data.tx)
            $('#sign-transaction').val(data.tx);

        // Reset dialog data so we don't reuse data on form in the future
        FW.DIALOG_DATA = {};

        // Initialize any tooltips
        $('[data-toggle="tooltip"]').tooltip({ 
            html: true,
            placement: 'bottom'
        }); 

    },100);

    // Submit form if user clicks 'Submit' button
    $('#btn-submit').click($.debounce(100,function(e){
        $('#sign-transaction-form').submit();
    }));

    // Hide the form if users clicks 'Cancel' button
    $('#btn-cancel').click($.debounce(100,function(e){
        dialogClose('dialog-sign-transaction');
    }));

    // Clear status messages when new unsigned transaction changes
    $('#sign-transaction').keyup(function(){
        updateTransactionStatus('clear');
    });

    // Verify transaction data by trying to decode it
    $('#btn-verify').click($.debounce(100,function(e){
        // build out object with name:value pairs
        var arr    = $('#sign-transaction-form').serializeArray(),
            vals   = {},
            errors = [];
        for(var i=0;i<arr.length;i++){
            var o = arr[i];
            vals[o.name] = o.value;
        }
        // Verify we have a message to broadcast
        if(String(vals.transaction).length==0){
            errors.push('You must enter a transaction to verify! ');
            $('#sign-transaction').closest('.form-group').addClass('has-error has-danger');
        }
        // Determine wallet network so we can pass in API requests
        var network = (FW.WALLET_NETWORK==2) ? 'testnet' : 'mainnet';
        updateTransactionStatus('clear');
        // Display any error message
        if(errors.length){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>') );
        } else {
            // Try to decode what the transaction is doing
            updateTransactionStatus('pending', 'Decoding...');
            decodeTransaction(network, vals.transaction, function(tx){
                var title = '<i class="fa fa-lg fa-fw fa-search"></i> Verify Transaction Data',
                    msg   = 'This is does not appear to be a counterparty transaction.';
                // If this is a Counterparty transaction, display the decoded data
                if(tx && tx.xcp){
                    msg = 'Counterparty Transaction Data<br>';
                    msg += '<pre><code class="language-css" style="white-space: pre !important;">' + JSON.stringify(tx.xcp, null, 4) + '</code></pre>';
                }
                dialogMessage(title, msg);
                updateTransactionStatus('clear');
            });
        }
    }));

    // Confirm broadcast
    $('#btn-broadcast').click($.debounce(100,function(e){
        var signedTx = $('#signed-transaction').val();
        if(signedTx==''){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', 'You must sign your transaction before you can broadcast it!' );
        } else {
            // Callback to run after broadcasting send
            var doneCb = function(tx){
                if(tx){
                    dialogClose('dialog-sign-transaction');
                    dialogMessage('<i class="fa fa-lg fa-check"></i> Broadcast Successful', '<center>Your transaction has been broadcast to the network and should be confirmed shortly.' +
                                  '<br/><br/><a class="btn btn-success" href="' + FW.EXPLORER_API + '/tx/' + tx + '" target="_blank">View Transaction</a></center>');
                }
            }
            // Callback to run if user confirms action
            var confirmCb = function(){
                var network   = (FW.WALLET_NETWORK==2) ? 'testnet' : 'mainnet';
                updateTransactionStatus('pending', 'Broadcasting...');
                // Broadcast the transaction
                broadcastTransaction(network, signedTx, function(txid){
                    if(txid){
                        updateTransactionStatus('success', 'Transaction successfully broadcast!');
                        doneCb(txid);
                    } else {
                        updateTransactionStatus('error', 'Error broadcasting transaction!');
                        cbError(false, 'Error while trying to broadcast transaction', doneCb);
                    }
                });
            }
            // Confirm the action with the user
            var title = '<i class="fa fa-lg fa-fw fa-broadcast"></i> Confirm Broadcast?',
                msg   = 'Are you sure you wish to broadcast this signed transaction?';
            dialogConfirm(title, '<center>' + msg + '</center>', false, true, confirmCb);
        }
    }));

    // Handle form validation and displaying any errors, and try to sign the transaction
    $('#sign-transaction-form').validator().on('submit', function(e){
        // prevent form submission
        e.preventDefault(); 
        // build out object with name:value pairs
        var arr    = $(this).serializeArray(),
            vals   = {},
            errors = [];
        for(var i=0;i<arr.length;i++){
            var o = arr[i];
            vals[o.name] = o.value;
        }
        console.log('vals=',vals);
        // Verify we have a message to broadcast
        if(String(vals.transaction).length==0){
            errors.push('You must enter a transaction to sign! ');
            $('#sign-transaction').closest('.form-group').addClass('has-error has-danger');
        }
        updateTransactionStatus('clear');
        // Display any error message
        if(errors.length){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>') );
        } else {
            // Handle signing the message and populating the 'Signed' box
            var network = (FW.WALLET_NETWORK==2) ? 'testnet' : 'mainnet';
            updateTransactionStatus('pending', 'Signing...');
            signTransaction(network, vals.source, vals.source, vals.transaction, function(tx){
                var val = '';
                if(tx){
                    updateTransactionStatus('success', 'Transaction successfully signed!');
                    val = tx;
                } else {
                    updateTransactionStatus('error', 'Error signing transaction!');
                    dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', 'Error while trying to sign transaction!' );
                }
                $('#signed-transaction').val(val);
                updateTransactionStatus('clear');
            });    
        
        }
    })


});
</script>